<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
	  xmlns:c="http://java.sun.com/jsp/jstl/core"
	  xmlns:o="http://omnifaces.org/ui"
	  xmlns:s="http://skyve.org/xml/ui"
	  xmlns:d="http://primefaces.org/diamond"
	  dir="#{bean.dir}">

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <link rel="shortcut icon" href="#{request.contextPath}/resources/diamond-layout/images/favicon.ico"
              type="image/x-icon"/>
        <link rel="icon" href="#{request.contextPath}/resources/diamond-layout/images/favicon.ico" type="image/x-icon"/>
    </f:facet>
    <title>${project.description}</title>
    <base href="#{bean.baseHref}" />
	<!-- normally commented out for security reasons
	<h:outputText value="#{bean.skyveVersionComment}" escape="false" />
	-->	
	<ui:include src="/WEB-INF/pages/includes/favicon.xhtml" />
	<!-- 4.7 is disabled by default
	<link type="text/css" rel="stylesheet" href="fontawesome-4.7.0/css/font-awesome.min.css" />
	-->
	<link type="text/css" rel="stylesheet" href="fontawesome-6.5.1/css/all.min.css" />
<!--
			<link type="text/css" rel="stylesheet" href="skyve/css/primeflex.min.css?v=#{bean.webResourceFileVersion}" />
-->
	<link type="text/css" rel="stylesheet" href="skyve/css/prime-min.css?v=#{bean.webResourceFileVersion}" />
	<link type="text/css" rel="stylesheet" href="pages/css/admin.css?v=#{bean.webResourceFileVersion}" />
	
	<h:outputScript name="js/layout.js?v=#{bean.webResourceFileVersion}" library="diamond-layout" />
	<h:outputScript name="js/prism.js?v=#{bean.webResourceFileVersion}" library="diamond-layout"/>
	<script type="text/javascript" src="skyve/prime/skyve-min.js?v=#{bean.webResourceFileVersion}"></script>
	<script type="text/javascript">
		<!-- PF8 doesnt work with touch on - a.swipe is not a function when registering swipeLeft and swipeRight -->
		PrimeFaces.env.touch=false;
		#{bean.apiScript}
		SKYVE.PF.establishHistory();
	</script>
	<ui:insert name="templateHead" />
</h:head>

<h:body>
	<h:panelGroup styleClass="skyveEnvBanner skyveTopEnvBanner"
		rendered="#{not empty bean.environmentIdentifier}">#{bean.environmentIdentifier}</h:panelGroup>
	<h:panelGroup styleClass="skyveEnvBanner skyveBottomEnvBanner"
		rendered="#{not empty bean.environmentIdentifier}">#{bean.environmentIdentifier}</h:panelGroup>
	<div class="#{(showMenu ? 'layout-wrapper layout-static' : 'layout-wrapper layout-static')
             .concat(' layout-sidebar-').concat(skyve.getThemeColour('indigo').split('-')[0])}">


		<!-- Include the menu if we need to show topbar dropdown as otherwise the dropdown click event is not registered -->
		<!-- <s:resetMenuState rendered="#{resetMenu}" /> -->
		
		<c:if test="#{not showMenu and (showSwitchMode or showLogout)}">
			<d:menu />
		</c:if>
		<div class="layout-sidebar">
			<div class="layout-menu-container">
				<d:menu widgetVar="diamondMenuWidget" id="leftMenu" model="#{menu.menu}" />
			</div>
		</div>

		<p:messages id="messages" widgetVar="messages" globalOnly="true"
			escape="false">
			<p:autoUpdate />
		</p:messages>
		<p:growl id="growl" widgetVar="growl" globalOnly="true" escape="false">
			<p:autoUpdate />
		</p:growl>
		<!-- Do not establish a socket for a public user (user in session but no principal established) -->
		<o:socket id="socket" widgetVar="socket" channel="skyve"
			user="#{sessionScope['user'].id}"
			onmessage="function(message) { SKYVE.PF.onPushMessage(message) }"
			rendered="#{not empty request.remoteUser}" />
		<!-- Need separate growl for push coz autoUpdated growl wont respond through javascript -->
		<p:growl id="pushGrowl" widgetVar="pushGrowl" for="push" escape="false" />
		<p:tooltip id="help" widgetVar="help" globalSelector="i" escape="false" />
		
		<p:confirmDialog id="confirm" global="true">
			<p:commandButton id="confirmCancel" value="Cancel" type="button"
				styleClass="ui-confirmdialog-no" style="float:right;"
				icon="fa-solid fa-xmark" />
			<p:commandButton id="confirmOK" value="OK" type="button"
				styleClass="ui-confirmdialog-yes" style="float:right;"
				icon="fa-solid fa-check" />
		</p:confirmDialog>
		<div class="layout-content-wrapper">
			<ui:include src="./topbar.xhtml">
				<ui:param name="showMenu" value="#{showMenu}" />
				<ui:param name="showSwitchMode" value="#{showSwitchMode}" />
				<ui:param name="showLogout" value="#{showLogout}" />
				<ui:param name="title" value="#{bean.title}" />
				<ui:param name="bean" value="#{bean}" />
			</ui:include>

			<div class="layout-content">
				<ui:insert name="templateBody" />
			</div>
			<div class="layout-footer">
			    <div class="footer-container">
			        <div class="logo-container">
			            <a href="#{bean.baseHref}">
			                <h:graphicImage name="images/skyve-thick-grey.png" style="max-height: 30px;" library="skyve" />
						</a>
			        </div>
			        <div class="version-container">
			            <span>Version ${project.version}</span>
			        </div>
			        <div class="copyright-container">
			            <span><i class="fa-regular fa-copyright"></i> All Rights Reserved</span>
			        </div>
			    </div>
			</div>
		</div>
	</div>
	
	<p:ajaxStatus
		style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
		<f:facet name="start">
			<i class="pi pi-spin pi-spinner layout-ajax-loader-icon"
				aria-hidden="true" />
		</f:facet>

		<f:facet name="complete">
			<h:outputText value="" />
		</f:facet>
	</p:ajaxStatus>
	<div class="layout-mask modal-in"></div>

	<h:outputStylesheet name="css/primeicons.css" library="diamond-layout" />
	<h:outputStylesheet name="css/primeflex.min.css" library="diamond-layout" />
	<h:outputStylesheet 
    name="#{'css/layout-'.concat(skyve.getThemeColour('indigo-light').split('-')[1]).concat('.css?v=').concat(bean.webResourceFileVersion)}" 
    library="diamond-layout" />
	<h:outputStylesheet name="css/diamond.css?v=#{bean.webResourceFileVersion}" library="skyve" />
</h:body>

</html>
